Debugging বা বাগ অনুসন্ধান একটি অত্যন্ত গুরুত্বপূর্ণ প্রক্রিয়া যা সফটওয়্যার ডেভেলপমেন্টের প্রতিটি পর্যায়ে ব্যবহার করা হয়। Angular অ্যাপ্লিকেশনে বা যেকোনো ওয়েব অ্যাপ্লিকেশনে Chrome DevTools ব্যবহার করে আপনি কোডের সমস্যা চিহ্নিত করতে পারেন। Chrome DevTools হল একটি ব্রাউজার টুলস যা আপনার অ্যাপ্লিকেশনের পারফরম্যান্স এবং বাগগুলো ডিবাগ করতে সহায়ক।
এখানে আমরা Chrome DevTools এর কিছু গুরুত্বপূর্ণ ফিচার এবং debugging পদ্ধতি নিয়ে আলোচনা করবো।
১. Chrome DevTools কী?
Chrome DevTools হল Google Chrome ব্রাউজারে অন্তর্ভুক্ত একটি ডিবাগিং টুলস যা আপনাকে HTML, CSS, JavaScript, Network, Console ইত্যাদি পর্যবেক্ষণ এবং ডিবাগ করতে সাহায্য করে। এটি ডেভেলপারদের ওয়েব অ্যাপ্লিকেশনগুলোকে দ্রুত ডিবাগ এবং অপটিমাইজ করতে সহায়ক।
২. Chrome DevTools ব্যবহার করা
২.১ DevTools খুলা
Chrome DevTools খোলার জন্য আপনার Chrome ব্রাউজারে নিচের যেকোনো পদ্ধতি অনুসরণ করতে পারেন:
- Right-click করুন এবং Inspect সিলেক্ট করুন।
- কিবোর্ড থেকে F12 অথবা Ctrl + Shift + I (Windows/Linux) বা Cmd + Option + I (macOS) চাপুন।
- আপনি যখন Angular অ্যাপ চলাচল করাচ্ছেন তখন ng serve এর মাধ্যমে অ্যাপ রান করান এবং DevTools খুলুন।
২.২ Console Tab
Console ট্যাবটি আপনার অ্যাপের log মেসেজ, ত্রুটি, বা ওয়ার্নিং দেখানোর জন্য ব্যবহৃত হয়। এটি ডেভেলপারদের জন্য অত্যন্ত সহায়ক, কারণ আপনি এখানে console.log(), console.error() ইত্যাদি দিয়ে ডিবাগ মেসেজ দেখতে পারবেন।
console.log('This is a debug message');
console.error('This is an error message');
এছাড়া আপনি সরাসরি JavaScript কোড রান করতেও পারেন। এটি কোডের ভুল চিহ্নিত করার জন্য খুবই কার্যকরী।
২.৩ Elements Tab
Elements ট্যাবে আপনি অ্যাপের DOM (Document Object Model) দেখতে এবং সম্পাদনা করতে পারেন। এটি আপনাকে HTML এবং CSS স্টাইল ম্যানিপুলেট করতে সহায়ক।
- HTML ট্যাব থেকে, আপনি DOM-এ কোন পরিবর্তন ঘটিয়েছেন তা সনাক্ত করতে পারেন।
- আপনি CSS স্টাইল পরিবর্তন করতে এবং রিয়েল-টাইমে পছন্দের ডিজাইন দেখতে পারেন।
২.৪ Sources Tab
Sources ট্যাবে আপনি অ্যাপের কোড ডিবাগ করতে পারেন। এটি JavaScript কোডের মধ্যে ব্রেকপয়েন্ট সেট করতে এবং ডিবাগ করতে ব্যবহৃত হয়।
২.৪.১ Breakpoints ব্যবহার করা
- Breakpoints হল এমন পয়েন্ট যেখানে কোড রান হওয়ার সময় থামবে। এটি ব্যবহার করে আপনি কোড এক্সিকিউশন এবং ভেরিয়েবলের মান পর্যবেক্ষণ করতে পারেন।
- Breakpoint সেট করা:
- Sources ট্যাবে যান এবং আপনার স্ক্রিপ্ট ফাইল খুঁজে বের করুন।
- যেই লাইনে ব্রেকপয়েন্ট সেট করতে চান, সেখানকার লাইনের পাশে ক্লিক করুন। ব্রেকপয়েন্ট হালকা নীল রঙে চিহ্নিত হবে।
- ব্রেকপয়েন্টে কোড থামানো হলে, আপনি Step Over, Step Into, Step Out বাটন ব্যবহার করে কোডের এক্সিকিউশন স্টেপ বাই স্টেপ করতে পারবেন।
২.৫ Network Tab
Network ট্যাবটি API কল, রিসোর্স লোড, এবং অন্যান্য নেটওয়ার্ক রিকোয়েস্ট ট্র্যাক করতে ব্যবহৃত হয়। এটি বিশেষভাবে অ্যাপ্লিকেশনের সার্ভার থেকে ডেটা ফেচ করার সময় সহায়ক।
২.৫.১ Network Request ট্র্যাকিং
- এখানে আপনি সমস্ত HTTP রিকোয়েস্ট যেমন GET, POST, PUT, DELETE দেখতে পাবেন।
- আপনি রিকোয়েস্টের স্ট্যাটাস কোড, হেডার, রেসপন্স টাইম, এবং রেসপন্স বডি দেখেতে পারেন।
- XHR (XMLHttpRequest) বা Fetch রিকোয়েস্টের মাধ্যমে API কলের ডিবাগ করতে পারবেন।
২.৬ Performance Tab
Performance ট্যাবটি আপনার অ্যাপ্লিকেশনের পারফরম্যান্স এবং কোড এক্সিকিউশন বিশ্লেষণ করতে ব্যবহৃত হয়।
- আপনি অ্যাপের লোডিং টাইম, স্ক্রিপ্ট এক্সিকিউশন সময়, এবং DOM রেন্ডারিং এর সমস্ত ডিটেইল দেখতে পারেন।
- এটি বিশেষভাবে প্রফাইলিং এবং পারফরম্যান্স অপটিমাইজেশনের জন্য খুবই গুরুত্বপূর্ণ।
২.৭ Application Tab
Application ট্যাবে আপনি অ্যাপ্লিকেশনের সব স্টোরেজ ম্যানেজমেন্ট দেখতে পারেন, যেমন LocalStorage, SessionStorage, IndexedDB, এবং Cookies।
- এখানে আপনি localStorage বা sessionStorage এ ডেটা সংরক্ষণ করা আছে কিনা দেখতে পারবেন এবং সেই ডেটা সরাসরি ম্যানিপুলেট করতে পারবেন।
৩. Angular Debugging with Chrome DevTools
Angular অ্যাপ্লিকেশনের জন্য কিছু অতিরিক্ত ডিবাগিং টিপস:
৩.১ Angular Augury Extension
Augury হল একটি Chrome Extension যা Angular অ্যাপ্লিকেশনের state এবং structure দেখাতে ব্যবহৃত হয়। এটি আপনাকে Angular এর কম্পোনেন্ট, রাউটিং, এবং স্টোর বুঝতে সহায়তা করে।
- Chrome Web Store থেকে Augury ডাউনলোড করুন।
- Extension ইনস্টল করার পর, Chrome DevTools এ Augury ট্যাবটি দেখুন।
- Angular অ্যাপ্লিকেশনের component tree এবং services এর তথ্য দেখতে পারবেন।
৩.২ Enable Angular Debugging in Code
Angular অ্যাপের মধ্যে ডিবাগিং চালু করার জন্য Angular DevTools ব্যবহার করতে পারেন, যা ng-devtools নামে একটি নতুন টুল। এটি অ্যাপের স্টেট এবং কম্পোনেন্ট লাইফসাইকেল ট্র্যাক করার জন্য ব্যবহৃত হয়।
npm install --save-dev @angular-devtools/core
এটি Angular অ্যাপের ডিবাগিং সহজ করে এবং Angular কম্পোনেন্টের ইন্টারঅ্যাকশন সহজেই বুঝতে সহায়তা করে।
Chrome DevTools একটি অত্যন্ত শক্তিশালী টুল যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের প্রতিটি পর্যায়ে কার্যকর। আপনি এই টুল ব্যবহার করে কোড ডিবাগ, পারফরম্যান্স অপটিমাইজেশন, এবং API রিকোয়েস্ট ট্র্যাক করতে পারবেন। Angular অ্যাপ্লিকেশনের জন্য DevTools আরও শক্তিশালী এবং আপনাকে বিভিন্ন ডিবাগিং টিপস এবং টুলস, যেমন Angular Augury এবং Angular DevTools, প্রদান করে।
Read more
